1. Instrumente de lucru pentru crearea site-urilor Web:
- editoare de texte şi de calcul tabelar care salvează documentele ca pagini Web; - editoare de HTML; - editoare de imagini.
Crearea unei paginii web cu ajutorul aplicaţiei Notepad Paginile web sunt scrise într-un limbaj numit HTML (HyperText Markup Language). Paginile HTML se fac într-un editor de scris, cum ar fi Notepad şi se creează astfel: - Se deschide Notepad - După ce se lucrează în el, se salvează :File -> Save - Se intitulează nume.html, se alege la Save as Type All Files şi se apasă butonul SAVE. Modificare. Pentru modificarea paginii se procedează astfel: - se deschide pagina .html - se da click dreapta pe fundalul paginii şi View Source - după modificare se dă File -> Save
Editoare ce permit salvarea ca pagini Web
Transformarea documentelor Word existente în pagini Web
Formatul fişier HTML asociat permite salvarea şi încărcarea fişierelor Word în/din HTML. Pentru a transforma un document Word într-o pagină Web: - salvaţi mai întâi documentul în modul normal Word pentru a nu strica originalul. - Apoi deschideţi meniul Fişier / Salvare ca pagină Web (valabilă şi pentru fişierele Excel). În fereastra de dialog Salvare ca :
introduceţi un nume de fişier pentru document şi
selectaţi, apoi, directorul în care vreţi să-l stocaţi.
Apăsaţi Salvare. Word va salva documentul şi va converti toate formatările Word în coduri HTML.
Cum puteţi salva fişierul pps (Power Point) în format „html”(PAGINA WEB) cu alte cuvinte conversie din „pps” în "html"
Deschideţi aplicaţia PowerPoint:Start- All Programs- Microsoft Office- PowerPoint,
deschideţi fişierul pps din: butonul Office, opţiunea Open şi alegeţi locaţia,
din: butonul Office , Save as-Other formats. În caseta Save as type alegeţi „Pagina WEB ”.
Atenţie: NU alegeţi „Pagina WEB într-un singur fişier” fiindcă este un format mult mai slab decât formatul de tip „Pagina WEB (htm ,html)” (cu dosar de resurse!).
html_ppt.JPG
html_ppt.JPG
Editoare HTML Paginile web sunt fişiere scrise în limbajul HTML. Pentru a simplifica modul de elaborare a paginilor web, firmele de software au pus la dispozitia utilizatorilor programe specializate. Aceste programe, utilizate frecvent pentru crearea paginilor web, sunt cunoscute sub numele generic de editoare HTML. Ele permit unui număr mare de utilizatori să îşi creeze propriile pagini web, chiar dacă nu au cunoştinte temeinice legate de limbajul HTML. Cele mai cunoscute editoare HTML sunt editorul Netscape, creat de firma Netscape Communications si Front Page Editor, creat de firma Microsoft.
2. Structura unui site Web:
După modul în care au fost construite există 2 tipuri principale de site-uri Web:A. Site-urile statice - conţin doar fişiere HTML şi CSS (cascading style sheet - foi de stil in cascada), imagini şi text. Acestea sunt cele mai simple site-uri, pentru că nu necesită cunoştinţe avansate de programare. Acest tip de site-uri este potrivit pentru prezentarea unei firme mici.
B. Site-urile web dinamice-bazate pe baze de date PHP sau MySQL. Acest tip de website este recomandat pentru pagini complexe, de genul portalurilor de ştiri, blog-urilor dar şi site-urilor de prezentare care oferă funcţionalitate sporită. După scopul utilizării site-urile web sunt de mai multe categorii:
Site-uri de prezentare - au 5-10 pagini în care se prezintă o firmă, un produs sau un serviciu.
Site-uri de prezentare corporate - utilizate pentru prezentarea companiilor mari, includ mai multe pagini prin care este prezentată activitatea companiei, proiectele desfășurate. Site-uri de informare - sunt create exclusiv pentru a prezenta informații pe o anumită tema. Site-uri de campanie publicitară - sunt realizate in aplicatii de animatie Flash, sunt utilizate pentru a promova un produs sau un serviciu. Site-uri de conținut generat de utilizatori- majoritatea continutului acestor site-uri apartine vizitatorilor. De exempluwww.YouTube.com. Site-uri retele sociale, de ex. www.facebook.com. Site-uri de stiri - aparțin de obicei instituțiilor.
Bloguri - site-uri web create de obicei de o singură persoană, care scrie des articole pe diverse teme. Articolele pot fi comentate de vizitatori.
Magazine online - create pentru a servi comerțului online. Portaluri - de exemplu www.k.ro, www.yahoo.com - conțin mai multe tipuri de informații, știri, videclipuri, etc.Motoare de căutare - sunt utilizate pentru a căuta informații în intregul world wide web (rețea mondială), de exemplu www.google.com.
3. Elemente de conţinut ale paginilor Web:
Trecerea pe o linie nouă se face folosind marcajul <br> (" line break " - întrerupere de linie). Stiluri pentru blocurile de text: : Îngrosat <B>...</B>, Înclinat <I>...</I>, Subliniat <U>...</U>. Un font este caracterizat de următoarele atribute:- culoare (color) -Ex: <font color=”red”>fragment de text de culoare rosie</font>.- mărime (size) -Ex: <font size="5">Fonturi de marime 5.</font>.Pentru a stabili mărimea unui font se utilizează atributul size al etichetei <font>. Valorile acestui atribut pot fi: 1, 2, 3, 4, 5, 6, 7.- grosime (weight) -<font weight="100">Fonturi de grosime 100.</font>.Grosimea unui caracter poate fi definită cu ajutorul atributului weight al etichetei <font>. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 și 900.Toate aceste atribute aparţin etichetei <font>. Exemplu:
<html> <head> <title> Culoarea si familia fontului</title> </head> <body> Aceste linie este scrisa cu caractere normale.<br /> <font color="red">Aceasta linie este rosie.</font><br /> Aici <font color="green">fiecare </font><font color="blue">cuvant </font><font color="yellow">are </font> <font color="cyan">alta </font> <font color="#3478fa">culoare.</font><br /> </body> </html>
Liste Liste neordonate O lista neordonată este un bloc de text delimitat de etichetele <ul>...</ul> (" unordered list " = lista neordonată). Fiecare element al listei este iniţiat de eticheta <li> (list item). Exemplu: <html> <head> <title>Liste_neordonate</title> </head> <body> <ul><b>Culori uzuale disponibile prin nume:</b>
Liste ordonate O listă ordonată de elemente este un bloc de text delimitat de etichetele <ol>...</ol> (" ordered list " = listă ordonată). Fiecare element al listei este iniţiat de eticheta <li>(list item). Exemplu: <html> <head> <title>Liste ordonate</title> </head> <body> <ol>Culori uzuale disponibile prin nume :
Tabele Pentru a insera un tabel se folosesc etichetele <table>...</table>. Un tabel este format din rânduri. Pentru a insera un rând intr-un tabel se folosesc etichetele <tr>...</tr> ("table row "= rând de tabel ). Folosirea etichetei de sfârşit </tr> este opţională. Un rând este format din mai multe celule ce conţin date. O celula de date se introduce cu eticheta <td>..</td>. Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( " tabel header " = cap de tabel ) în loc de <td>. Conţinutul celulelor definite cu <th> este scris cu caractere aldine si centrat. Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> ( "table caption" = titlu tabel ). Aceasta etichetă trebuie plasată în interiorul etichetelor <table>...</table>, dar nu în interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile: " bottom " ( sub tabel ), " top " ( deasupra tabelului ), " left " ( la stanga tabelului ), " right " ( la dreapta tabelului ). Exemplu: <html> <head><title>TABEL</title></head> <body> <table border><caption align="top"><B><U>ORAR</B></U> <tr><th>ORA</th><th>LUNI</th><th>MARTI</th><th>MIERCURI</th><th>JOI</th><th>VINERI</th></tr> <tr><th>8-9</th><td>ROMANA</td><td>ISTORIE</td><td>ENGLEZA</td><td>FRANCEZA</td><td>MATEMATICA</td></tr> <tr><th>9-10</th><td>SPORT</td><td>LOGICA</td><td>FIZICA</td><td>TIC</td><td>ENGLEZA</td></tr> <tr><th>10-11</th><td>ROMANA</td><td>ISTORIE</td><td>ENGLEZA</td><td>FRANCEZA</td><td>MATEMATICA</td></tr> <tr><th>11-12</th><td>SPORT</td><td>M3</td><td>FIZICA</td><td>TIC</td><td>ENGLEZA</td></tr> <tr><th>12-13</th><td>SPORT</td><td>LOGICA</td><td>MATEMATICA</td><td>M5</td><td>M2</td></tr> <tr><th>13-14</th><td>BIOLOGIE</td><td>LOGICA</td><td>FIZICA</td><td>M4</td><td>FRANCEZA</td></tr> </table> </body> </html>
1. Instrumente de lucru pentru crearea site-urilor Web:
- editoare de texte şi de calcul tabelar care salvează documentele ca pagini Web;- editoare de HTML;
- editoare de imagini.
Crearea unei paginii web cu ajutorul aplicaţiei Notepad
Paginile web sunt scrise într-un limbaj numit HTML (HyperText Markup Language).
Paginile HTML se fac într-un editor de scris, cum ar fi Notepad şi se creează astfel:
- Se deschide Notepad
- După ce se lucrează în el, se salvează : File -> Save
- Se intitulează nume.html, se alege la Save as Type All Files şi se apasă butonul SAVE.
Modificare. Pentru modificarea paginii se procedează astfel:
- se deschide pagina .html
- se da click dreapta pe fundalul paginii şi View Source
- după modificare se dă File -> Save
Editoare ce permit salvarea ca pagini Web
Transformarea documentelor Word existente în pagini Web
Formatul fişier HTML asociat permite salvarea şi încărcarea fişierelor Word în/din HTML. Pentru a transforma un document Word într-o pagină Web: - salvaţi mai întâi documentul în modul normal Word pentru a nu strica originalul. - Apoi deschideţi meniul Fişier / Salvare ca pagină Web (valabilă şi pentru fişierele Excel). În fereastra de dialog Salvare ca :
Cum puteţi salva fişierul pps (Power Point) în format „html”(PAGINA WEB)
cu alte cuvinte conversie din „pps” în "html"
Atenţie: NU alegeţi „Pagina WEB într-un singur fişier” fiindcă este un format mult mai slab decât formatul de tip „Pagina WEB (htm ,html)” (cu dosar de resurse!).
Editoare HTML
Paginile web sunt fişiere scrise în limbajul HTML. Pentru a simplifica modul de elaborare a paginilor web, firmele de software au pus la dispozitia utilizatorilor programe specializate. Aceste programe, utilizate frecvent pentru crearea paginilor web, sunt cunoscute sub numele generic de editoare HTML. Ele permit unui număr mare de utilizatori să îşi creeze propriile pagini web, chiar dacă nu au cunoştinte temeinice legate de limbajul HTML. Cele mai cunoscute editoare HTML sunt editorul Netscape, creat de firma Netscape Communications si Front Page Editor, creat de firma Microsoft.
2. Structura unui site Web:
După modul în care au fost construite există 2 tipuri principale de site-uri Web:A. Site-urile statice - conţin doar fişiere HTML şi CSS (cascading style sheet - foi de stil in cascada), imagini şi text. Acestea sunt cele mai simple site-uri, pentru că nu necesită cunoştinţe avansate de programare. Acest tip de site-uri este potrivit pentru prezentarea unei firme mici.
B. Site-urile web dinamice-bazate pe baze de date PHP sau MySQL. Acest tip de website este recomandat pentru pagini complexe, de genul portalurilor de ştiri, blog-urilor dar şi site-urilor de prezentare care oferă funcţionalitate sporită. După scopul utilizării site-urile web sunt de mai multe categorii:
3. Elemente de conţinut ale paginilor Web:
Trecerea pe o linie nouă se face folosind marcajul <br> (" line break " - întrerupere de linie).
Stiluri pentru blocurile de text: : Îngrosat <B>...</B>, Înclinat <I>...</I>, Subliniat <U>...</U>.
Un font este caracterizat de următoarele atribute:- culoare (color) -Ex: <font color=”red”>fragment de text de culoare rosie</font>.- mărime (size) -Ex: <font size="5">Fonturi de marime 5.</font>.Pentru a stabili mărimea unui font se utilizează atributul size al etichetei <font>. Valorile acestui atribut pot fi: 1, 2, 3, 4, 5, 6, 7.- grosime (weight) -<font weight="100">Fonturi de grosime 100.</font>.Grosimea unui caracter poate fi definită cu ajutorul atributului weight al etichetei <font>. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 și 900.Toate aceste atribute aparţin etichetei <font>.
Exemplu:
<html>
<head>
<title> Culoarea si familia fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale.<br />
<font color="red">Aceasta linie este rosie.</font><br />
Aici <font color="green">fiecare </font><font color="blue">cuvant </font><font color="yellow">are </font>
<font color="cyan">alta </font>
<font color="#3478fa">culoare.</font><br />
</body>
</html>
FISA DE LUCRU:
Fisa de lucru HTML.pdf
- Details
- Download
- 169 KB
Liste
Liste neordonate
O lista neordonată este un bloc de text delimitat de etichetele <ul>...</ul> (" unordered list " = lista neordonată). Fiecare element al listei este iniţiat de eticheta <li> (list item).
Exemplu:
<html>
<head>
<title>Liste_neordonate</title>
</head>
<body>
<ul><b>Culori uzuale disponibile prin nume:</b>
<li>Black
<li>White
<li>Red
<li>Green
<li>Blue
<li>Yellow
<li>Purple
<li>Aqua
</ul>
</body>
</html>
Liste ordonate
O listă ordonată de elemente este un bloc de text delimitat de etichetele <ol>...</ol> (" ordered list " = listă ordonată). Fiecare element al listei este iniţiat de eticheta <li>(list item).
Exemplu:
<html>
<head>
<title>Liste ordonate</title>
</head>
<body>
<ol>Culori uzuale disponibile prin nume :
<li>Black
<li>White
<li>Red
<li>Green
<li>Blue
<li>Yellow
<li>Purple
<li>Aqua
</ol>
</body>
</html>
Tabele
Pentru a insera un tabel se folosesc etichetele <table>...</table>.
Un tabel este format din rânduri. Pentru a insera un rând intr-un tabel se folosesc etichetele <tr>...</tr> ("table row "= rând de tabel ). Folosirea etichetei de sfârşit </tr> este opţională. Un rând este format din mai multe celule ce conţin date. O celula de date se introduce cu eticheta <td>..</td>.
Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( " tabel header " = cap de tabel ) în loc de <td>. Conţinutul celulelor definite cu <th> este scris cu caractere aldine si centrat. Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> ( "table caption" = titlu tabel ). Aceasta etichetă trebuie plasată în interiorul etichetelor <table>...</table>, dar nu în interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile:
" bottom " ( sub tabel ), " top " ( deasupra tabelului ), " left " ( la stanga tabelului ), " right " ( la dreapta tabelului ).
Exemplu:
<html>
<head><title>TABEL</title></head>
<body>
<table border><caption align="top"><B><U>ORAR</B></U>
<tr><th>ORA</th><th>LUNI</th><th>MARTI</th><th>MIERCURI</th><th>JOI</th><th>VINERI</th></tr>
<tr><th>8-9</th><td>ROMANA</td><td>ISTORIE</td><td>ENGLEZA</td><td>FRANCEZA</td><td>MATEMATICA</td></tr>
<tr><th>9-10</th><td>SPORT</td><td>LOGICA</td><td>FIZICA</td><td>TIC</td><td>ENGLEZA</td></tr>
<tr><th>10-11</th><td>ROMANA</td><td>ISTORIE</td><td>ENGLEZA</td><td>FRANCEZA</td><td>MATEMATICA</td></tr>
<tr><th>11-12</th><td>SPORT</td><td>M3</td><td>FIZICA</td><td>TIC</td><td>ENGLEZA</td></tr>
<tr><th>12-13</th><td>SPORT</td><td>LOGICA</td><td>MATEMATICA</td><td>M5</td><td>M2</td></tr>
<tr><th>13-14</th><td>BIOLOGIE</td><td>LOGICA</td><td>FIZICA</td><td>M4</td><td>FRANCEZA</td></tr>
</table>
</body>
</html>
CREAREA LEGATURILOR:
Fisa de lucru HTML - introducerea legaturilor.pdf
- Details
- Download
- 168 KB